<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01监听输入事件</title>
    <style>
        .search{
            width: 300px;
            height: 30px;
            margin: 30px auto;
            position: relative;
        }
        .search input{
            width: 250px;
            height: 26px;
        }
        .search label{
            position: absolute;
            left: 10px;
            top: 8px;
            font-size: 12px;
            cursor: text;
        }
    </style>
    <script>
        window.onload = function(){
            //定义id函数（共用）
            function $(id){
                return document.getElementById(id);
            }
            //点击事件
            $("txt").oninput = $("txt").onpropertychange = function(){
                if(this.value ==""){
                    $("message").style.display = "block";
                }else{
                    $("message").style.display = "none";
                }
            }
        }
    </script>
</head>
<body>
<div class="search">
    <input type="text" id="txt">
    <label for="txt" id="message">七夕礼物</label>
</div>
</body>
</html>